<template>
  <div class="bg-light">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/math" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">错题本</h5>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <h6>按章节筛选</h6>
      <div class="filter-chips">
        <div 
          v-for="filter in filters" 
          :key="filter.id"
          class="filter-chip"
          :class="{ active: currentFilter === filter.id }"
          @click="selectFilter(filter.id)"
        >
          {{ filter.name }}
        </div>
      </div>
    </div>

    <!-- 错题列表 -->
    <router-link 
      v-for="question in filteredQuestions"
      :key="question.id"
      :to="question.explanationPath"
      class="text-decoration-none"
    >
      <div class="wrong-question-card">
        <div class="chapter-info">
          <i class="bi bi-bookmark-fill"></i>
          {{ question.chapter }}
        </div>
        <div class="question-text">
          {{ question.text }}
        </div>
        <div class="wrong-info">
          <span>错误原因：{{ question.wrongReason }}</span>
          <span>错误次数：{{ question.wrongCount }}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'MathWrongView',
  data() {
    return {
      currentFilter: 'all',
      filters: [
        { id: 'all', name: '全部' },
        { id: 'calculus', name: '高等数学' },
        { id: 'linear', name: '线性代数' },
        { id: 'probability', name: '概率统计' }
      ],
      questions: [
        {
          id: 1,
          chapter: '高等数学 - 微分方程',
          text: '求解微分方程 y\' + 2y = e^x 的通解...',
          wrongReason: '计算步骤有误',
          wrongCount: 2,
          subject: 'calculus',
          explanationPath: '/math/real/explanation?year=2024&question=1'
        },
        {
          id: 2,
          chapter: '线性代数 - 特征值',
          text: '求矩阵A的特征值和特征向量...',
          wrongReason: '特征多项式计算错误',
          wrongCount: 1,
          subject: 'linear',
          explanationPath: '/math/special/explanation?chapter=linear&question=1'
        }
      ]
    }
  },
  computed: {
    filteredQuestions() {
      if (this.currentFilter === 'all') {
        return this.questions
      }
      return this.questions.filter(q => q.subject === this.currentFilter)
    }
  },
  methods: {
    selectFilter(filterId) {
      this.currentFilter = filterId
    }
  }
}
</script>

<style scoped>
.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.wrong-question-card {
  background: white;
  margin: 15px;
  padding: 20px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wrong-question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chapter-info {
  color: #40E0D0;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.question-text {
  color: #333;
  margin-bottom: 15px;
  line-height: 1.6;
}

.wrong-info {
  display: flex;
  justify-content: space-between;
  color: #dc3545;
  font-size: 0.9rem;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.filter-section {
  background: white;
  margin: 15px;
  padding: 15px;
  border-radius: 15px;
}

.filter-chips {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.filter-chip {
  background: #f0f0f0;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-chip.active {
  background: #40E0D0;
  color: white;
}
</style> 